<template>
  <el-popover
    placement="right"
    width="700"
    trigger="hover">
    <el-table
      :data="data"
      highlight-current-row
      border
      :height="height"
      :key="Math.random()"
      style="width: 100%;overflow:'auto'">
      <el-table-column width="150" property="columnName" label="英文名"></el-table-column>
      <el-table-column width="150" property="columnComment" label="中文名"></el-table-column>
      <el-table-column width="100" property="columnType" label="类型"></el-table-column>
      <el-table-column width="50" property="columnWidth" label="长度"></el-table-column>
      <el-table-column width="50" property="isRequired" label="必填"></el-table-column>
      <el-table-column width="50" property="isPk" label="键"></el-table-column>
      <el-table-column property="columnDesc" label="注释"></el-table-column>
    </el-table>
    <el-button slot="reference"  style="font-size: 16px;" type="text" icon="el-icon-more"></el-button>
  </el-popover>
</template>

<script>

export default {
  name: 'PopoverItem',
  props: {
    data: {
      type: Array,
      default: []
    },
    height:{
      type:Number,
      default: 0
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {

  },
}
</script>

<style scoped>

  ::v-deep .el-table th {
    background-color: #304156 !important; /* 设置表头背景颜色 */
    color: white; /* 设置表头文字颜色 */
  }
  ::v-deep .el-table__header th {
    background-color: #304156 !important; /* 设置表头背景颜色 */
    color: white; /* 设置表头文字颜色 */
  }
</style>
